<template>
  <div class="module-box">
    <!-- 左 -->
    <div style="flex: 0 1 25%">
      <dv-border-box-1 style="width: 100%; height: 200px">
        <CapsuleChart
          :dataChart="dataChart"
          :colorsChart="['#e062ae', '#fb7293', '#e690d1', '#32c5e9', '#96bfff']"
        />
      </dv-border-box-1>
      <dv-border-box-2 style="width: 100%; height: 200px">
        <LevelPond />
      </dv-border-box-2>
      <dv-border-box-10 style="width: 100%; height: 200px">
        <ScatterCharts />
      </dv-border-box-10>
    </div>
    <!-- 中 -->
    <div style="flex: 0 1 50%">
      <FlylineChart />
    </div>
    <!-- 右 -->
    <div style="flex: 0 1 25%">
      <dv-border-box-8 style="width: 100%; height: 300px">
        <dv-capsule-chart
          :config="config2"
          style="width: 100%; height: 300px"
        />
      </dv-border-box-8>
      <dv-border-box-10 style="width: 100%; height: 300px">
        <CapsuleChart />
      </dv-border-box-10>
    </div>
  </div>
</template>

<script>
import CapsuleChart from './capsuleChart';
import LevelPond from './components/levelPond';
import FlylineChart from './components/flylineChart';
import ScatterCharts from './components/scatterCharts';
export default {
  components: {
    CapsuleChart,
    LevelPond,
    FlylineChart,
    ScatterCharts,
  },
  data() {
    return {
      dataChart: [
        { name: '标题1', value: 100 },
        { name: '标题2', value: 200 },
        { name: '标题3', value: 300 },
        { name: '标题4', value: 400 },
        { name: '标题5', value: 500 },
        { name: '标题6', value: 600 },
        { name: '标题7', value: 700 },
      ],
      config2: {
        data: [
          {
            name: '南阳',
            value: 167,
          },
          {
            name: '周口',
            value: 123,
          },
          {
            name: '漯河',
            value: 98,
          },
          {
            name: '郑州',
            value: 75,
          },
          {
            name: '西峡',
            value: 66,
          },
        ],
        colors: ['#e062ae', '#fb7293', '#e690d1', '#32c5e9', '#96bfff'],
        unit: '单位',
        showValue: true,
      },
    };
  },
};
</script>

<style></style>
